<template>
  <div>
    <h3>优惠券增加</h3>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">优惠券类型</td>
          <td>
            <select v-model="info.DiscoutType">
              <option value="">请选择</option>
              <option :value="1">代金券</option>
              <option :value="2">折扣券</option>
              <option :value="3">兑换券</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">优惠券标题</td>
          <td>
            <input type="text" v-model="info.Title" />
          </td>
        </tr>
        <tr>
          <td align="right">优惠券副标题</td>
          <td>
            <input type="text" v-model="info.SubTitle" />
          </td>
        </tr>
        <tr>
          <td align="right">优惠券图片</td>
          <td>
            <input type="file" @change="img" />
            <img
              :src="info.Photo"
              width="100"
              height="100"
              alt=""
              v-if="info.Photo != ''"
            />
          </td>
        </tr>
        <tr>
          <td align="right">库存</td>
          <td>
            <input type="text" v-model="info.Inventory" />
          </td>
        </tr>
        <tr>
          <td align="right">每人限领</td>
          <td>
            <input type="text" v-model="info.PopleMaxNum" disabled />
          </td>
        </tr>
        <tr>
          <td align="right">使用条件</td>
          <td>
            <input type="text" v-model="info.Money" />
          </td>
        </tr>
        <!-- 根据条件进行显示 代金券的时候会显示减免金额 -->
        <tr v-if="info.DiscoutType == 1">
          <td align="right">减免金额</td>
          <td>
            <input type="text" v-model="info.SubMoney" />
          </td>
        </tr>
        <!-- 根据条件进行显示  折扣券的时候会显示折扣价-->
        <tr v-if="info.DiscoutType == 2">
          <td align="right">折扣价</td>
          <td>
            <input type="text" v-model="info.ZheKou" />
          </td>
        </tr>
        <tr>
          <td align="right">有效期</td>
          <td>
            <input type="date" v-model="info.BeginTime" />-<input
              type="date"
              v-model="info.EndTime"
            />
          </td>
        </tr>
        <tr>
          <td align="right">适用业务</td>
          <td>
            <input
              type="checkbox"
              name="service"
              value="订房"
              v-model="info.Services"
            />订房
            <input
              type="checkbox"
              name="service"
              value="商城"
              v-model="info.Services"
            />商城
            <input
              type="checkbox"
              name="service"
              value="堂食"
              v-model="info.Services"
            />堂食
            <input
              type="checkbox"
              name="service"
              value="付款码"
              v-model="info.Services"
            />付款码
          </td>
        </tr>
        <tr>
          <td align="right">使用须知</td>
          <td>
            <textarea cols="50" rows="5" v-model="info.Notice"></textarea>
          </td>
        </tr>
        <tr>
          <td align="right">适用门店</td>
          <td>
            <select v-model="info.ShopId">
              <option value="">请条件</option>
              <option :value="item.Id" v-for="item in data.list">
                {{ item.ShopName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">服务电话</td>
          <td>
            <input type="text" v-model="info.Phone" maxlength="11" />
          </td>
        </tr>
        <tr>
          <td align="right">优惠券颜色</td>
          <td>
            <input type="color" v-model="info.Color" />
          </td>
        </tr>
        <tr>
          <td align="right">是否发布</td>
          <td>
            <input
              type="radio"
              name="state"
              :value="1"
              v-model="info.State"
            />是
            <input
              type="radio"
              name="state"
              :value="0"
              v-model="info.State"
            />否
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="确定"
              class="btn btn-primary"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

let info: any = reactive({
  DiscoutType: '',
  Title: '',
  SubTitle: '',
  Photo: '',
  Inventory: '',
  PopleMaxNum: 1,
  Money: '',
  BeginTime: '',
  EndTime: '',
  Services: [],
  Notice: '',
  ShopId: '',
  Phone: '',
  Color: '#ff0000',
  State: 1,
  SubMoney: 0,
  ZheKou: 10,
});
//声明一个变量存储获取列表向后端传递的数据
let info1: any = reactive({
  pageIndex: 1, //页码
  pageSize: 100, //页容量
  shopName: '',
  shopAddress: '',
});

//声明一个变量接受后端返回的数据
let data: any = reactive({
  list: [],
  totalCount: 0, //总条数
  totalPage: 0, //总页数
});

//-------------------------生命周期---------------
onMounted(() => {
  getShopList();
});

//1.实现图片上传
const img = (e: any) => {
  //获取图片文件
  let obj = e.target.files[0];
  //将图片文件转成formData
  let f = new FormData();
  f.append('file', obj);

  //发送网络请求
  axios({
    url: '/api/Uploads/UploadImg',
    method: 'post',
    data: f,
  })
    .then((res) => {
      console.log(res);
      if (res.data == '不是图片') {
        alert('您上传的不是图片');
        return;
      }

      if (res.data == '大于2M') {
        alert('您上传的图片大于2M');
        return;
      }

      info.Photo = res.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//2.获取门店列
const getShopList = () => {
  axios({
    url: '/api/Shops/GetShopList',
    method: 'get',
    params: info1,
  })
    .then((res) => {
      console.log(res);
      //第二种赋值
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

//3.增加
const ok = () => {
  //1.有效性判断（使用条件  减免金额   折扣价）
  if (info.Money == '') {
    alert('使用条件不能为空');
    return;
  }
  let reg = /^[1-9]\d*$/; //正整数正则
  if (reg.test(info.Money) == false) {
    alert('使用条件必须是正整数');
    return;
  }

  if (info.SubMoney === '' && info.DiscoutType == 1) {
    alert('减免金额不能为空');
    return;
  }
  if (reg.test(info.SubMoney) == false && info.DiscoutType == 1) {
    alert('减免金额只能是正整数');
    return;
  }
  if (info.ZheKou == '' && info.DiscoutType == 2) {
    alert('折扣价不能为空');
    return;
  }
  if (isNaN(info.ZheKou) == true && info.DiscoutType == 2) {
    alert('折扣价只能是数字');
    return;
  }
  if ((info.ZheKou > 9.9 || info.ZheKou < 1) && info.DiscoutType == 2) {
    alert('折扣价只能是1-9.9之间的数字');
    return;
  }

  //2.发送网络请求
  info.Services = info.Services.toString();
  axios({
    url: '/api/Discounts/DiscountAdd',
    method: 'post',
    data: info,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('添加成功');
        router.push('/discountList');
      } else if (res.data == -1) {
        alert('相同类型的优惠券标题重复');
        return;
      } else {
        alert('添加失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
